import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component

// 1. 全局注册组件 svg-icon
Vue.component('svg-icon', SvgIcon)

// 引入svg图片
// import eye from './svg/eye.svg'
// import dashboard from './svg/dashboard.svg'
// import dashboard from './svg/dashboard.svg'
// import dashboard from './svg/dashboard.svg'
// import dashboard from './svg/dashboard.svg'
// import dashboard from './svg/dashboard.svg'
// import dashboard from './svg/dashboard.svg'

// ---------上边手动的方式引入太麻烦, 能不能自动化引入--------------
/*
 require.context(directory,useSubdirectories,regExp)
 - directory:表示检索的目录
 - useSubdirectories：表示是否检索子文件夹
 - regExp:匹配文件的正则表达式,一般是文件名
*/

// 2. 以下3句代码实现了把svg文件夹中的所有svg图片以模块的方式自动引入到项目
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

// console.log(req.keys()) // 获取到所有的svg图片的路径数组
// console.log(requireAll(req)) // 根据路径数组映射引入生成模块数组

/*
 注意: 在项目中已经集成了svg-sprite技术, 在webpack中已经配置了svg-sprite-loader
 svg-sprite-loader会把引入的所有svg模块处理放入一个容器中, 并以图片的名称组合生成id
 icon-[name]
 */

